<!--
 * @description: 余额明细加筛选条件
 * @Author: latiao
 * @Date: 2021-11-08 16:49:33
 * @LastEditors: vikingShip
 * @LastEditTime: 2022-02-09 13:38:24
-->
<template>
  <view id="wrap" style="width: 100%;height:100%;" @tap="hideDelete">
    <view class="topText" @tap="onShowDeal">
      {{selectLabel}}交易类型
      <u-icon name="arrow-down"></u-icon>
    </view>
    <view :class="'filter-head ' + tabFix" id="fix-top">
      <picker :end="expriseData" mode="date" @change="dateChange" fields="month">
        <view style="display:flex">
                  {{selectDate}}
        <u-icon name="arrow-down"></u-icon>
        </view>
      </picker>
      <view>支出：¥{{outBalance}}{{' '}}收入¥{{inBalance}}</view>
    </view>
    <view v-if="!!tabFix" style="height: 170rpx;width:100%;"></view>
    <view v-for="(item, index) in list" :key="index" :class="'recode re-' + tabFix" @longpress="showDelete"
      :data-id="item.id">
      <view class="recode__conter">
        <view>{{item.detailName}}</view>
        <view class="recode__conter--time">
          {{item.createTime}}
          <text class="delete-record" v-if="delId === item.id" @tap.stop="deleteRecord">删除</text>
        </view>
      </view>
      <view :class="(item.type==1 ? ' ':'recode__money--add') + ' recode__money '">
        {{item.changeType== 1?'-':'+'}}{{item.useBalance}}
      </view>
    </view>
    <view v-if="isShowEmptyBottom" style="height: 200rpx;width:100%;"></view>
    <view class="empty-data" v-if="!list.length">暂无数据</view>
     <u-loading-page loading-text="loading..." :loading="loading&&list.length<total" bg-color="rgba(0,0,0,0.4)"></u-loading-page>
    <block v-if="loading">
      <view v-if="list.length >= total" class="live-tip">到底了~</view>
    </block>
    <u-popup :show="showDealType" @close="onClose" mode="bottom">
      <view class="deaConter" @tap="onClose">
        <view class="deaConter__top ">
          <u-icon name="arrow-left" style="margin-right:40rpx" @tap="onClose"></u-icon>
          选择交易类型
        </view>
        <view class="deaConter__content">
          <view v-for="(item, index) in dealTypes" :key="index"
            :class="'deaConter__content-item ' + (selectDeal == item.value ? 'deaConter__content-avtive':'')"
            @tap.stop="onDealSelect" :data-val="item.value" :data-label="item.label">
            {{item.label}}
          </view>
        </view>
      </view>
    </u-popup>
    <u-modal title="删除" :show="dialogShow" showCancelButton @confirm="confirmInfo" @cancel="onCloseDislog">
      <view class="confirmText">删除后，该条交易记录将从列表移除并无法找到</view>
    </u-modal>
    <!-- <view class="overlay" wx:if="{{show}}" bind:tap="onClickHideShow"></view> -->
  </view>
</template>


<script lang='ts'>
  import {
    Component,
    Vue
  } from 'vue-property-decorator'
  import {
    getMemberBalanceRecord,
    deleteMemberBalanceRecord,
  } from "@/api/modules/member";
  @Component({})
  export default class BalanceDetail extends Vue {
    showDealType: boolean = false
    selectDeal: number = -1
    selectLabel: string = "全部"
    tabFix: string = ""
    loading: boolean = false
    total: number = 0
    tabTop: number = 0
    wrapHeight: number = 0
    isShowEmptyBottom: boolean = false
    tabHeight: number = 0
    selectDate: string = `${new Date().getFullYear()}年${new Date().getMonth() + 1}月`
    expriseData: string = `${new Date().getFullYear()}-${new Date().getMonth() + 1}`
    page: number = 1
    list: Array < any > = []
    delId: any = "" // 需要删除的记录id
    show: boolean = false
    dialogShow: boolean = false
    outBalance: number | string = 0
    inBalance: number | string = 0

    dealMap = {
      0: "用户消费（购买商品）",
      1: "微信充值",
      2: "消费返利",
      3: "退款成功",
    }
    dealTypes = [{
        label: "全部",
        value: -1
      },
      {
        label: "用户消费",
        value: 0
      },
      {
        label: "退款成功",
        value: 3
      },
      {
        label: "微信充值",
        value: 1
      },
      {
        label: "消费返利",
        value: 2
      },
      {
        label: "分销佣金",
        value: 4
      },
      {
        label: "提现",
        value: 5
      },
    ]

    // 页面周期函数--监听页面加载
    onLoad() {
      this.fetchList();
      const query = uni.createSelectorQuery();
      query.select("#fix-top")
        .boundingClientRect(res => {
          this.tabTop = res.top;
        }).exec();
    }

    onPageScroll(e) {
      const wrapHeight = this.wrapHeight;
      // 处理抖动情况
      if (
        wrapHeight - uni.getSystemInfoSync().windowHeight <=
        this.tabTop + 12 &&
        wrapHeight - uni.getSystemInfoSync().windowHeight > 0
      ) {
        this.setData({
          tabFix: "",
        });
        return false;
      }
      //tab的吸顶效果
      if (e.scrollTop >= this.tabTop) {
        if (this.tabFix) {
          return;
        } else {
          this.setData({
            tabFix: "Fixed",
          });
        }
      } else {
        this.setData({
          tabFix: "",
        });
      }
      return false;
    }

    dateChange(e) {
      const value: string[] = e.detail.value.split("-");
      this.setData({
          selectDate: `${value[0]}年${value[1]}月`,
        },
        () => {
          this.fetchList()
        },
      );
    }

    fetchList() {
      uni.showLoading({
        title: "加载中",
      });
      let selectDate: any = this.selectDate;
      selectDate = selectDate.split("年");
      selectDate = `${selectDate[0]}${selectDate[1].split("月")[0]}`;
      const params: any = {
        page: 1,
        size: 20,
        yearMonth: selectDate
      };
      if (this.selectDeal !== -1) {
        params.dealType = this.selectDeal;
      }
      getMemberBalanceRecord(params)
        .then(data => {
          uni.hideLoading();
          this.setData({
            list: data.list,
            inBalance: data.inBalance,
            outBalance: data.outBalance,
            page: data.pages,
            total: data.total,
            loading: false,
            showDealType: false,
          }, () => {
            const query = uni.createSelectorQuery();
            query
              .select("#wrap")
              .boundingClientRect(res => {
                this.setData({
                  wrapHeight: res.height,
                });
              })
              .exec();
          });
        })
    }

    onShowDeal() {
      this.setData({
        showDealType: true
      });
    }

    onClose() {
      this.setData({
        showDealType: false
      });
    }

    onDealSelect(e) {
      const val = e.currentTarget.dataset.val;
      const label = e.currentTarget.dataset.label
      this.setData({
          selectDeal: val,
          selectLabel: label
        },
        this.fetchList,
      );
    }

    /** 触底加载更多 */
    onReachBottom() {
      this.list.length < this.total &&
        this.setData({
          loading: true
        }, this.fetchList);
    }

    /** 显示删除图标并获取想要删除的id */
    showDelete(e) {
      if (e.currentTarget.dataset.id) {
        this.setData({
          delId: e.currentTarget.dataset.id,
          show: true,
        });
      }
    }

    hideDelete() {
      this.setData({
        delId: null,
      });
    }

    onClickHideShow() {
      this.setData({
        show: false,
      });
    }

    deleteRecord() {
      this.setData({
        dialogShow: true
      });
    }

    async confirmInfo() {
      try {
        await deleteMemberBalanceRecord(this.delId);
        this.fetchList();
        this.setData({
          delId: null,
          dialogShow:false
        });
      } catch (err) {
        this.setData({
          delId: null,
          dialogShow:false
        });
        this.$Popup.toast(err)
      }
    }

    onCloseDislog() {
      this.setData({
        dialogShow: false
      });
    }
  }
</script>

<style lang="scss" scoped>
  .topText {
    @include flex();
    padding: 40rpx 0;
    background-color: #ededed;
    font-size: 30rpx;
    text-align: center;
    color: rgba(191, 158, 103, 1);
  }

  .addText {
    margin-bottom: 85rpx;
  }

  .recode {
    padding: 40rpx;
    border-bottom: 1rpx solid #f2f2f2;
    font-size: 26rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;

    .recode__conter--time {
      color: #9e9e9e;
      margin-top: 20rpx;
    }
  }

  .recode__money {
    font-weight: bold;
    font-size: 36rpx;
  }

  .recode__money--add {
    color: #ff9900;
  }

  .deaConter__top {
    @include flex(flex-start);
    border-bottom: 1rpx solid #aaa;
    line-height: 90rpx;
    padding: 0 28rpx;
    font-size: 30rpx;
  }

  .deaConter__content {
    padding: 0 24rpx 30rpx;
    overflow: hidden;
  }

  .deaConter__content-item {
    text-align: center;
    font-size: 26rpx;
    padding: 26rpx 0;
    width: 31%;
    margin-top: 30rpx;
    float: left;

    &:nth-child(3n-1) {
      margin: 30rpx 3.5% 0;
    }

    border: 1rpx solid #bbb;
  }

  .deaConter__content-avtive {
    background-color: rgba(191, 158, 103, 1);
    color: #fff;
  }

  @include b(live-loading) {
    width: 100%;
    height: 100rpx;
  }

  @include b(live-tip) {
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    color: #b0b0b0;
    font-size: 24rpx;

    @include e(loadMore) {
      background-color: #ffffff;
      color: #333333;
    }
  }

  .filter-head {
    display: flex;
    padding: 40rpx;
    border-bottom: 40rpx solid #ededed;
    justify-content: space-between;
    background-color: #fff;

    picker {
      font-size: 36rpx;
      color: #bf9e67;
    }

    >view {
      line-height: 50rpx;
      font-size: 32rpx;
    }
  }

  .empty-data {
    font-size: 32rpx;
    line-height: 300rpx;
    text-align: center;
    color: #aaa;
  }

  .Fixed {
    background-color: #eee;
    width: 100%;
    position: fixed;
    top: 0;
    margin-top: 0;
    z-index: 99999;
    border-bottom: 0;
  }

  // .re-Fixed {
  //     margin-top: 160rpx;
  // }

  .delete-record {
    padding: 5px 10px;
    background-color: #9e9e9e;
    color: #fff;
    z-index: 2;
  }

  .overlay {
    transition-duration: 300ms;
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: red;
  }

  .confirmText {
    padding: 30rpx 40rpx;
  }
</style>